<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has size="medium" type="primary" @click="addgrade">新增等级</el-button></div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row class="main-loading">
        <el-table-column prop="id" label="等级"></el-table-column>
        <el-table-column prop="name" label="等级名称"></el-table-column>
        <el-table-column prop="l1" label="一级佣金比例" v-if="agent_rank>0"></el-table-column>
        <el-table-column prop="l2" label="二级佣金比例" v-if="agent_rank>1"></el-table-column>
        <el-table-column prop="l3" label="三级佣金比例" v-if="agent_rank>2"></el-table-column>
        <el-table-column prop="l3" label="升级条件">
          <template slot-scope="scope">
            <template v-for="(item, i) in conditionslist">
              <span :key="i" v-if="scope.row[item.key] > 0">{{ item.name }}:{{ scope.row[item.key] }}{{item.unit}}</span><br/>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="EditHandle(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="handleClose(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="type == 'add' ? '新增等级' : '编辑等级'" :visible.sync="drawer" destroy-on-close width="60%">
      <Editgrade ref="editgrade" :ids="ids" @on-close="onclose"></Editgrade>
    </el-dialog>
  </el-container>
</template>

<script>
import {agent_gradelist, del_agent_grade} from '@/api/mall/agent';
import Editgrade from './components/Editgrade.vue';
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      page: 1,
      size: 10,
      list: [],
      total: 10,
      type: 'add',
      drawer: false,
      ids: [],
      conditionslist: [
        {
          id: 1,
          name: '下级用户人数',
          key: 'users',
          unit: '人'
        },
        {
          id: 2,
          name: '佣金总额',
          key: 'commission',
          unit: '元'
        },
        {
          id: 3,
          name: '已提现佣金总额',
          key: 'draw',
          unit: '元'
        },
        {
          id: 4,
          name: '下级用户消费金额',
          key: 'payment',
          unit: '元'
        },
        {
          id: 5,
          name: '下级分销商人数',
          key: 'agents',
          unit: '人'
        }
      ]
    };
  },
  mounted() {
    this.getlist();
  },
  computed: {
    ...mapGetters(["agent_rank"])
  },
  components: {
    Editgrade
  },
  methods: {
    getlist() {
      let data = {
        page: this.page,
        size: this.size
      };
      agent_gradelist(data).then(res => {
        this.list = res.msg;
        this.ids = [];
        this.list.forEach(a => {
          this.ids.push(a.id);
        });
      });
    },
    addgrade() {
      this.drawer = true;
    },
    onclose() {
      this.drawer = false;
      this.getlist();
    },
    EditHandle(id) {
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.editgrade.getinit(id);
      });
    },
    handleClose(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            id: id
          };
          del_agent_grade(data).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    }
  }
};
</script>

<style></style>
